<template>
    <!-- 人员管理-工资明细 -->
    <div class="payrollDetail">
        <div class="mainContent">
            <div class="search">
                <div
                    class="list"
                    style="cursor: pointer"
                    @click="$router.push({ path: '/emp/payroll' })">
                    <el-button
                        size="medium"
                        type="primary"
                        icon="el-icon-arrow-left"
                        >返回</el-button
                    >
                </div>
                <div class="list">
                    <span>时间:</span>
                    <span>{{ payrollIdObj.year }}年{{ payrollIdObj.month }}月</span>
                </div>
                <div class="list">
                    <span>状态:</span>
                    <span v-if="payrollIdObj.state == 0">未完成</span>
                    <span v-if="payrollIdObj.state == 1">已完成</span>
                </div>
                <div class="list">
                    <span>合作单位:</span>
                    <span>{{ payrollIdObj.corpName }}</span>
                </div>
                <div class="list">
                    <span>人员总计:</span>
                    <span>{{ empList.length }}人</span>
                </div>
                <div class="list">
                    <span>实发工资金额总计:</span>
                    <span>{{ moneyTotal }}元</span>
                </div>
                <div class="list">
                    <el-button
                        @click="commit"
                        :disabled="payrollIdObj.state != 0 || !btnList.includes('emp/payroll/commit')"
                        :type="payrollIdObj.state != 0 || !btnList.includes('emp/payroll/commit') ? 'info' : 'primary'"
                        size="small"
                        plain
                        >提交工资</el-button
                    >
                </div>
            </div>
            <div
                class="search"
                style="padding-top: 0px">
                <div class="list">
                    <el-button
                        :type="payrollIdObj.state != 0 ? 'info' : 'primary'"
                        size="small"
                        plain
                        @click="exportExl"
                        :disabled="payrollIdObj.state != 0"
                        v-preventReClick="1500"
                        >导出</el-button
                    >
                    <el-button
                        :type="payrollIdObj.state != 0 ? 'info' : 'primary'"
                        size="small"
                        plain
                        :disabled="payrollIdObj.state != 0"
                        >导入</el-button
                    >
                    <input
                        id="upload_file1"
                        type="file"
                        :disabled="payrollIdObj.state != 0"
                        @change="importExl"
                        accept=".xls,"
                        style="position: absolute; left: 67px; top: 0; height: 32px; opacity: 0; width: 55px" />
                </div>
                <div class="list">操作流程：导出表格→填写信息→导入表格</div>
            </div>
            <div class="table">
                <el-table
                    :data="empList"
                    :height="tableHeight"
                    border>
                    <el-table-column
                        fixed
                        prop="empName"
                        label="人员姓名"></el-table-column>
                    <el-table-column
                        prop="idCardNo"
                        label="身份证号"
                        width="180px"></el-table-column>
                    <el-table-column
                        prop="workRoleName"
                        label="工人类型"></el-table-column>
                    <el-table-column
                        prop="workTypeName"
                        label="工种"></el-table-column>
                    <el-table-column
                        prop="attendDays"
                        label="系统出勤天数"
                        v-if="clearingForm == 1"></el-table-column>
                    <el-table-column
                        prop="realAttendDays"
                        label="实际出勤天数"
                        v-if="clearingForm == 1"></el-table-column>
                    <el-table-column
                        prop="unitPrice"
                        label="工日工资"
                        v-if="clearingForm == 1"></el-table-column>
                    <el-table-column
                        prop="workAmount"
                        label="完成工程量"
                        v-if="clearingForm == 2"></el-table-column>
                    <el-table-column
                        prop="unitPrice"
                        label="单价"
                        v-if="clearingForm == 2"></el-table-column>
                    <el-table-column
                        prop="salaryTotal"
                        label="工资总额"
                        width="120px"
                        :render-header="showTotal"></el-table-column>
                    <el-table-column
                        prop="salaryBorrow"
                        label="借款"
                        width="120px"></el-table-column>
                    <el-table-column
                        prop="salaryDeduct"
                        label="扣减费用"
                        :render-header="showBorrow"></el-table-column>
                    <el-table-column
                        prop="salaryShould"
                        label="应发工资"
                        width="120px"
                        :render-header="showShould"></el-table-column>
                    <el-table-column
                        prop="salaryReal"
                        label="实发工资"
                        width="120px"
                        :render-header="showReal"></el-table-column>
                    <el-table-column
                        prop="date"
                        label="发放日期"
                        :render-header="showDate"></el-table-column>
                    <el-table-column
                        prop="remark"
                        label="备注"
                        width="150px"></el-table-column>
                    <el-table-column
                        prop="imgUrlList"
                        label="工资图片"
                        width="180px">
                        <template slot-scope="scope">
                            <template v-if="scope.row.imgUrlList && scope.row.imgUrlList.length > 0">
                                <el-image
                                    v-for="(src, index) in scope.row.imgUrlList"
                                    :src="src"
                                    :key="index"
                                    style="display: inline-block; width: 45px; height: 45px; margin-right: 5px"
                                    :preview-src-list="scope.row.imgUrlList"></el-image>
                            </template>
                            <span v-else>—</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="right"
                        label="操作"
                        width="100px"
                        align="center">
                        <template slot-scope="scope">
                            <el-button
                                :disabled="!btnList.includes('emp/payroll/edit') || payrollIdObj.state != 0"
                                @click.native.prevent="updateRow(scope.$index, empList)"
                                type="text"
                                size="small"
                                >修改</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="dowm">
                <p>附件</p>
                <div class="upload">
                    <el-button
                        :disabled="payrollIdObj.state != 0 || !btnList.includes('emp/payroll/upload')"
                        :type="payrollIdObj.state != 0 || !btnList.includes('emp/payroll/upload') ? 'info' : 'primary'"
                        size="small"
                        plain
                        >上传附件</el-button
                    >
                    <span style="color: red">可上传最大为 1.0 MB 文件。如果文件比较大请先压缩文件</span>
                    <input
                        id="upload_file"
                        type="file"
                        :disabled="payrollIdObj.state != 0 || !btnList.includes('emp/payroll/upload')"
                        @change="getavatar"
                        accept=".xls"
                        style="position: absolute; left: 0; top: 0; height: 32px; opacity: 0; width: 80px" />
                </div>
                <ul
                    v-for="item in payrollIdObj.attachList"
                    :value="item.corpId"
                    :key="item.corpId">
                    <li>
                        <span @click="getEXL(item)">{{ item.attachName }}</span>
                        <span
                            @click="removeExl(item)"
                            v-if="payrollIdObj.state == 0">
                            <i class="el-icon-delete"></i>
                        </span>
                    </li>
                </ul>
                <p
                    v-show="!payrollIdObj.attachList || payrollIdObj.attachList.length == 0"
                    style="font-size: 12px; margin-left: 5px; margin-top: 10px; margin-bottom: 10px">
                    暂无附件
                </p>
            </div>
        </div>

        <Modal
            v-model="updateModal"
            title="修改工资"
            width="800px"
            :mask-closable="false">
            <div class="msg">
                <h2>{{ clearingForm == 1 ? "出勤信息" : "工作信息" }}</h2>
                <div class="list">
                    <div
                        class="item"
                        v-if="clearingForm == 1">
                        <span>系统出勤天数:</span>
                        <span style="width: 180px">{{ sysAttendDays }}天</span>
                        <span></span>
                    </div>
                    <div class="item">
                        <span style="margin-left: 0">{{ clearingForm == 1 ? "实际出勤天数：" : "完成工程量：" }}</span>
                        <Input
                            v-if="clearingForm == 1"
                            v-model="attendDays"
                            placeholder="请输入实际出勤天数"
                            style="width: 180px" />
                        <Input
                            v-if="clearingForm == 2"
                            v-model="workAmount"
                            placeholder="请输入完成工程量"
                            style="width: 180px" />
                        <span v-if="clearingForm == 1">天</span>
                    </div>
                </div>
                <h2>金额信息</h2>
                <div class="list">
                    <div class="item">
                        <span>{{ clearingForm == 1 ? "工日工资" : "单价" }}:</span>
                        <Input
                            v-model="unitPrice"
                            :placeholder="clearingForm == 1 ? '请输入工日工资' : '请输入单价'"
                            style="width: 180px"
                            clearable />
                        <span>元</span>
                    </div>
                    <div class="item">
                        <span>工资总额:</span>
                        <Input
                            v-model="salaryTotal"
                            placeholder="请输入工资总额"
                            style="width: 180px"
                            clearable />
                        <span>元</span>
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>借款:</span>
                        <Input
                            v-model="salaryBorrow"
                            placeholder="请输入借款"
                            style="width: 180px"
                            clearable />
                        <span>元</span>
                    </div>
                    <div class="item">
                        <span>扣减费用:</span>
                        <Input
                            v-model="salaryDeduct"
                            placeholder="请输入扣减费用"
                            style="width: 180px"
                            clearable />
                        <span>元</span>
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>应发工资:</span>
                        <Input
                            v-model="salaryShould"
                            placeholder="请输入应发工资"
                            style="width: 180px"
                            clearable />
                        <span>元</span>
                    </div>
                    <div class="item">
                        <span>实发工资:</span>
                        <Input
                            v-model="salaryReal"
                            placeholder="请输入实发工资"
                            style="width: 180px"
                            clearable />
                        <span>元</span>
                    </div>
                </div>
                <h2>发放信息</h2>
                <div class="list">
                    <div class="item">
                        <span>发放日期:</span>
                        <DatePicker
                            type="date"
                            placeholder="请选择发放日期"
                            style="width: 200px"
                            :options="options"
                            v-model="date"
                            :clearable="false"
                            @on-change="getDate"></DatePicker>
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <span>备注:</span>
                        <Input
                            v-model="remark"
                            placeholder="请输入备注信息"
                            :maxlength="50"
                            style="width: 580px"
                            type="textarea" />
                    </div>
                </div>
                <div class="list">
                    <div class="item img">
                        <span>图片说明:</span>
                        <el-upload
                            :class="{ hideAdd: imgFlag }"
                            :data="{ module: 'payroll_emp' }"
                            ref="uploadImg"
                            :headers="headers"
                            :file-list="imgFileList"
                            :action="$axios.defaults.baseURL + '/ms/api/emp/upload/img'"
                            list-type="picture-card"
                            accept="image/png, image/jpg, image/jpeg"
                            :before-upload="beforeImgUpload"
                            :on-success="reportlogImgSuccess"
                            name="file"
                            :limit="3"
                            style="width: 300px"
                            :on-exceed="exceedImg"
                            :on-remove="handleReportRemove">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button
                    @click="cancel(1)"
                    type="info"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    @click="submitAll"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >确定</el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="deleteModal"
            title="删除"
            width="360px;"
            :mask-closable="false">
            <div style="margin: 10px">确定要删除这条附件吗？</div>
            <div slot="footer">
                <el-button
                    @click="cancel(2)"
                    type="info"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    @click="detele"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >确定</el-button
                >
            </div>
        </Modal>

        <Modal
            v-model="submitModal"
            title="提交工资"
            width="360px;"
            :mask-closable="false">
            <div style="margin: 10px">确定要提交这条工资记录吗？</div>
            <div slot="footer">
                <el-button
                    @click="cancel(3)"
                    type="info"
                    size="small"
                    plain
                    >取消</el-button
                >
                <el-button
                    @click="submitParoll"
                    type="primary"
                    size="small"
                    plain
                    v-preventReClick="1500"
                    >确定</el-button
                >
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    getPayrollDetails,
    getPayrollDetailsEdit,
    getPayrollAttachAdd,
    getPayrollAttachRemove,
    getPayrollCommit,
    getPayrollDetailExport,
    getPayrollDetailImport,
} from "@/api/api.js"
export default {
    data() {
        return {
            headers: {
                Authorization: localStorage.getItem("COOKIE"),
            },
            imgFileList: [], //本地文件
            imgFlag: false, //图片最大上传
            options: {
                disabledDate(date) {
                    return date > Date.now()
                },
            },
            payrollId: "",
            payrollIdObj: {},
            updateModal: false,
            empId: "",
            attachId: "",
            deleteModal: false,
            btnList: [],
            empList: [],
            submitModal: false,
            moneyTotal: 0,
            clearingForm: "", //结算方式
            sysAttendDays: "", //系统出勤天数
            workAmount: "", //完成工程量
            unitPrice: "", //单价
            attendDays: "", //出勤天数
            salaryTotal: "", //工资总额
            salaryShould: "", //应发工资
            salaryBorrow: "", //借款
            salaryDeduct: "", //扣款
            salaryReal: "", //实发工资
            date: "", //发放时间
            remark: "", //备注
            tableHeight: window.innerHeight - 365,
        }
    },
    methods: {
        beforeImgUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!isLt2M) {
                this.$Message.error("上传图片大小不能超过 2MB!")
            }
            return isLt2M
        },
        reportlogImgSuccess(res) {
            let obj = {
                url: res.data.path,
            }
            this.imgFileList.push(obj)
        },
        exceedImg(files, fileList) {
            if (this.imgFileList.length == 3) {
                this.$Message.warning("上传图片最多3张")
                return
            }
        },
        handleReportRemove(res, fileList) {
            for (let i = 0; i < this.imgFileList.length; i++) {
                if (res.url == this.imgFileList[i].url) {
                    this.imgFileList.splice(i, 1)
                }
            }
        },
        getDetails() {
            this.payrollId = this.$route.query.payrollId
            this.clearingForm = this.$route.query.clearingForm
            let params = {
                payrollId: this.payrollId,
            }
            getPayrollDetails(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.payrollIdObj = res.data
                        this.empList = res.data.empList
                        this.moneyTotal = 0
                        for (let i in this.empList) {
                            if (this.empList[i].date) {
                                this.empList[i].date = this.empList[i].date.substring(0, 10)
                            }
                            this.moneyTotal += this.empList[i].salaryReal
                        }
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        commit() {
            this.payrollId = this.$route.query.payrollId
            this.submitModal = true
        },
        submitParoll() {
            getPayrollCommit(this.payrollId)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功")
                        this.getDetails()
                        this.submitModal = false
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        showTotal(creatElement, { column, $index }) {
            return (
                <el-tooltip
                    class="item"
                    effect="dark"
                    content="根据工人合同，计算劳动报酬总和"
                    placement="top-start">
                    <span>工资总额</span>
                </el-tooltip>
            )
        },
        showBorrow(creatElement, { column, $index }) {
            return (
                <el-tooltip
                    class="item"
                    effect="dark"
                    content="工人借支的金额"
                    placement="top-start">
                    <span>扣减费用</span>
                </el-tooltip>
            )
        },
        showShould() {
            return (
                <el-tooltip
                    class="item"
                    effect="dark"
                    content="根据工人合同，计算劳动报酬总和与扣除非要后，剩余发放工人的工资"
                    placement="top-start">
                    <span>应发工资</span>
                </el-tooltip>
            )
        },
        showReal(creatElement, { column, $index }) {
            return (
                <el-tooltip
                    class="item"
                    effect="dark"
                    content="本月实际发放给工人的工资(需要跟银行流水或工人签字表一致)"
                    placement="top-start">
                    <span>实发工资</span>
                </el-tooltip>
            )
        },
        showDate(creatElement, { column, $index }) {
            return (
                <el-tooltip
                    class="item"
                    effect="dark"
                    content="工资实际发放给工人的时间(需要跟银行流水或工人签字表一致)"
                    placement="top-start">
                    <span>发放日期</span>
                </el-tooltip>
            )
        },
        getEXL(item) {
            window.open(item.url)
        },
        updateRow(index, rows) {
            this.updateModal = true
            this.empId = rows[index].empId
            this.attendDays = rows[index].realAttendDays
            this.workAmount = rows[index].workAmount
            this.sysAttendDays = rows[index].attendDays
            this.salaryTotal = rows[index].salaryTotal
            this.unitPrice = rows[index].unitPrice
            this.salaryShould = rows[index].salaryShould
            this.salaryBorrow = rows[index].salaryBorrow
            this.salaryDeduct = rows[index].salaryDeduct
            this.salaryReal = rows[index].salaryReal
            this.date = rows[index].date
            this.remark = rows[index].remark
            this.imgFileList = []
            if (rows[index].imgUrlList && rows[index].imgUrlList.length > 0) {
                rows[index].imgUrlList.forEach((v) => {
                    this.imgFileList.push({
                        url: v,
                    })
                })
            }
        },
        getDate(index) {
            this.date = index
        },
        submitAll() {
            let params = {
                payrollId: this.payrollId,
                empId: this.empId,
                attendDays: this.attendDays,
                workAmount: this.workAmount,
                unitPrice: this.unitPrice,
                salaryTotal: this.salaryTotal,
                salaryShould: this.salaryShould,
                salaryBorrow: this.salaryBorrow,
                salaryDeduct: this.salaryDeduct,
                salaryReal: this.salaryReal,
                date: this.date,
                remark: this.remark,
            }
            params.imgUrlList = []
            this.imgFileList.forEach((v) => {
                params.imgUrlList.push(v.url)
            })
            getPayrollDetailsEdit(params)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功")
                        this.updateModal = false
                        this.getDetails()
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        getavatar(e) {
            var file = document.getElementById("upload_file").files[0]
            var formdata = new FormData()
            formdata.append("file", file, file.name)
            formdata.append("payrollId", this.payrollId)
            let config = {
                headers: { "Content-Type": "multipart/form-data" },
            }
            getPayrollAttachAdd(formdata, config)
                .then((res) => {
                    if (res.code == 200) {
                        this.getDetails()
                        //上传成功之后清除历史记录
                        document.getElementById("upload_file").value = ""
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        removeExl(item) {
            this.attachId = item.attachId
            this.deleteModal = true
        },
        detele() {
            getPayrollAttachRemove(this.attachId)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("操作成功")
                        this.getDetails()
                        this.deleteModal = false
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        cancel(type) {
            if (type == 1) {
                this.updateModal = false
            } else if (type == 2) {
                this.deleteModal = false
            } else {
                this.submitModal = false
            }
        },
        exportExl() {
            getPayrollDetailExport(this.payrollId)
                .then((res) => {
                    if (res.code == 200) {
                        window.open(res.data.path)
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        importExl() {
            var file = document.getElementById("upload_file1").files[0]
            //文件类型
            var formdata = new FormData()
            formdata.append("file", file, file.name)
            formdata.append("payrollId", this.payrollId)
            formdata.append("clearingForm", this.clearingForm)
            let config = {
                headers: { "Content-Type": "multipart/form-data" },
                // headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
            }
            getPayrollDetailImport(formdata, config)
                .then((res) => {
                    if (res.code == 200) {
                        this.$Message.success("导入成功")
                        //上传成功之后清除历史记录
                        document.getElementById("upload_file1").value = ""
                    } else {
                        this.$Message.warning(res.msg)
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
    },
    watch: {
        imgFileList(val, oldVal) {
            if (val.length == 3) {
                this.imgFlag = true
            } else {
                this.imgFlag = false
            }
        },
        workAmount(val, oldVal) {
            //完成工程量
            if (val == undefined) {
                return
            }
            if (this.unitPrice == undefined) {
                this.salaryTotal = val * 0
            } else {
                this.salaryTotal = this.unitPrice * val
            }
        },
        attendDays(val, oldVal) {
            if (val == undefined) {
                return
            }
            if (this.unitPrice == undefined) {
                this.salaryTotal = val * 0
            } else {
                this.salaryTotal = this.unitPrice * val
            }
        },
        unitPrice(val, oldVal) {
            if (val == undefined) {
                return
            }
            if (this.clearingForm == 1) {
                if (this.attendDays == undefined) {
                    this.salaryTotal = 0 * val
                } else {
                    this.salaryTotal = this.attendDays * val
                }
            } else {
                if (this.workAmount == undefined) {
                    this.salaryTotal = 0 * val
                } else {
                    this.salaryTotal = this.workAmount * val
                }
            }
        },
        salaryBorrow(val, oldVal) {
            if (val == undefined) {
                return
            }
            if (this.salaryDeduct == undefined) {
                this.salaryShould = this.salaryTotal - val - 0
            } else {
                this.salaryShould = this.salaryTotal - val - this.salaryDeduct
            }
        },
        salaryShould(val, oldVal) {
            if (val == undefined) {
                return
            }
            this.salaryReal = val
        },
        salaryDeduct(val, oldVal) {
            if (val == undefined) {
                return
            }
            if (this.salaryBorrow == undefined) {
                this.salaryShould = this.salaryTotal - val - 0
            } else {
                this.salaryShould = this.salaryTotal - val - this.salaryBorrow
            }
        },
    },
    mounted() {
        this.getDetails()
        this.btnList = JSON.parse(localStorage.getItem("arr"))
    },
}
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
.payrollDetail {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    .mainContent{
        padding: 20px;
        box-sizing: border-box;
        border-radius: 10px;
        background-color: #ffffff;
        .search {
            display: flex;
            flex-wrap: wrap;
            .list {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                margin-right: 20px;
                margin-bottom: 10px;
                position: relative;
                span {
                    display: inline-block;
                    margin-right: 10px;
                    font-size: 18px;
                }
            }
        }
        // .table {
        //     max-height: 500px;
        //     overflow: auto;
        // }
        .dowm {
            p {
                font-size: 18px;
            }
            ul {
                list-style: none;
                margin-top: 10px;
                color: #6f86f8;
                cursor: pointer;
                width: 200px;
                li {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }
}
.hideAdd {
    /deep/ .el-upload--picture-card {
        display: none;
    }
}
.msg {
    width: 96%;
    margin: 0 auto;
    .list {
        width: 96%;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        margin-top: 20px;

        .item {
            // width: 200px;
            display: flex;
            justify-content: flex-start;
            //   align-items: center;
            position: relative;
            padding-left: 16px;
            box-sizing: border-box;
            &.img {
                /deep/.avatar-uploader {
                    flex: 1;
                    display: flex;
                    justify-content: flex-start;
                    align-items: flex-start;
                    flex-wrap: wrap;
                }
                /deep/.el-upload--picture-card {
                    width: 60px;
                    height: 60px;
                    border: 1px dashed #d9d9d9;
                    border-radius: 6px;
                    cursor: pointer;
                    position: relative;
                }
                /deep/.avatar-uploader .el-upload:hover {
                    border-color: var(--themeColor);
                }
                /deep/.avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 60px;
                    height: 60px;
                    line-height: 60px;
                    text-align: center;
                }
                /deep/.el-upload--picture-card {
                    line-height: 60px !important;
                }
                /deep/.avatar {
                    width: 60px;
                    height: 60px;
                    display: block;
                }
                /deep/.el-upload-list--picture-card .el-upload-list__item {
                    width: 60px !important;
                    height: 60px !important;
                    margin-right: 47px;
                    margin-bottom: 10px;
                    &:nth-of-type(3) {
                        margin-right: 0px;
                    }
                }
                /deep/.el-upload-list__item {
                    transition: none !important;
                }
            }

            span {
                display: block;
                width: 100px;
                height: 32px;
                line-height: 32px;
                margin-left: 5px;
            }
            .tip {
                position: absolute;
                top: 8px;
                left: 0;
                color: red;
                font-size: 16px;
                width: 2px;
            }
        }
    }
}
.upload {
    position: relative;
    margin-top: 10px;
}
h2 {
    margin: 10px 0;
}
</style>
